<template>
  <div class="container">
    <!--工具条-->
    <el-form :inline="true" :data="usersData" :model="filters" class="demo-form-inline" style="margin-top:40px;">
      <!-- 引入查询组件 -->
      <div class="search">
        <search ref="mySearch" :logo-data="logoData" @transfer="submitForm" @transferOption="option" />
      </div>
      <div class="newButton">
        <el-form-item>
          <el-button type="primary" size="small" @click="handleAdd"><svg-icon icon-class="add" style="cursor:pointer"/> 新增</el-button>
        </el-form-item>
        <el-form-item @selection-change="selsChange">
          <template >
            <el-button :disabled="sels.length===0" type="primary" size="small" style="background-color:purple;border-color:purple" @click="handlePermission">权限配置</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <template >
            <el-button :disabled="sels.length===0" type="primary" size="small" style="background-color:purple;border-color:purple" @click="handleRoles">角色配置</el-button>
          </template>
        </el-form-item>
      </div>
    </el-form>
    <!--列表-->
    <el-table v-loading="listLoading" ref="table" :data="usersData" stripe highlight-current-row class="table-list" @selection-change="selsChange" >
      <el-table-column type="selection"/>
      <el-table-column type="index"/>
      <el-table-column prop="account" label="账号"/>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <!-- <img :src="baseUrl + scope.row.avatarUrl" style="width:40px;height:40px"> -->
          <img v-if="scope.row.avatarUrl===baseUrl || scope.row.avatarUrl === baseUrl+ 'null' || scope.row.avatarUrl ===baseUrl+ 'undefined' || scope.row.avatarUrl === null || scope.row.avatarUrl.length===0" src="../../../assets/touxiang.jpg" class="avatarImg" style="width:40px;height:40px">
          <img v-else :src="baseUrl + scope.row.avatarUrl" class="avatarImg" style="width:40px;height:40px">
        </template>
      </el-table-column>
      <el-table-column prop="username" label="姓名"/>
      <el-table-column prop="role" label="角色"/>
      <el-table-column prop="department" label="部门">
        <template slot-scope="scope">
          <div v-html="scope.row.department"/>
        </template>
      </el-table-column>
      <el-table-column prop="position" label="职位">
        <template slot-scope="scope">
          <div v-html="scope.row.position"/>
        </template>
      </el-table-column>
      <el-table-column prop="entryYear" label="入职时间"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" @click="handleDetail(scope.row)">查看</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" class="demo-table">
            <div class="form-top">
              <el-form-item label="姓名" class="form-top-username">
                <span>{{ scope.row.username }}</span>
              </el-form-item>
              <el-form-item label="账号" class="form-top-account">
                <span>{{ scope.row.account }}</span>
              </el-form-item>
              <el-form-item label="部门" class="form-top-department">
                <span>{{ scope.row.department }}</span>
              </el-form-item>
            </div>
            <div class="form-middle">
              <el-form-item label="职位" class="form-middle-position">
                <span>{{ scope.row.position }}</span>
              </el-form-item>
              <el-form-item label="角色" class="form-middle-role">
                <span>{{ scope.row.role }}</span>
              </el-form-item>
              <el-form-item label="邮箱" class="form-middle-email">
                <span>{{ scope.row.email }}</span>
              </el-form-item>
            </div>
            <div class="form-buttom">
              <el-form-item label="手机号" class="form-buttom-tel">
                <span>{{ scope.row.tel }}</span>
              </el-form-item>
              <el-form-item label="微信" class="form-buttom-wechat">
                <span>{{ scope.row.wechat }}</span>
              </el-form-item>
              <el-form-item label="简介" class="form-buttom-memo">
                <span>{{ scope.row.memo }}</span>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col ref="row" :span="24" style="background-color: aliceblue">
      <div style="margin:10px">
        <el-button :disabled="sels.length===0" type="danger" @click="batchRemove" >批量删除</el-button>
        <div class="block" style="float:right;padding:5px 0">
          <el-pagination
            :total="total"
            :current-page.sync="page"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-col>
    <!--编辑界面-->
    <el-dialog :visible.sync="editFormVisible" :close-on-click-modal="false" title="编辑">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" label-width="80px">
        <el-upload
          ref="img"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
          :action="actionUrl"
          style="text-align:center"
          name="file">
          <img v-if="editForm.avatarUrl===baseUrl || editForm.avatarUrl === baseUrl+ 'null' || editForm.avatarUrl ===baseUrl+ 'undefined' || editForm.avatarUrl === null || editForm.avatarUrl.length===0" src="../../../assets/touxiang.jpg" class="avatarImg">
          <img v-else :src="baseUrl+editForm.avatarUrl" class="avatarImg">
        </el-upload>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="姓名" prop="username" class="inlineWith">
            <el-input v-model="editForm.username" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="inlineWith">
            <el-input
              :type="pwdAddType"
              v-model="editForm.password"
              name="password"/>
            <span class="show-pwd" @click="showAddPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="电子邮箱" prop="email" class="inlineWith">
            <el-input v-model="editForm.email" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="微信号码" prop="wechat" class="inlineWith" >
            <el-input v-model="editForm.wechat" auto-complete="off" />
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="入职年份" prop="entryDate" class="inlineWith">
            <el-date-picker v-model="editForm.entryYear" type="date" placeholder="选择日期" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="联系电话" prop="tel" class="inlineWith">
            <el-input v-model="editForm.tel" auto-complete="off"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="部门职位" prop="department" class="inlineWith">
            <el-cascader-multi ref="cascaderP" v-model="cascaderValue" :data="cascaderOptions" value-key="id" style="width:95%"/>
          </el-form-item>
        </div>
        <el-form-item label="简介" prop="memo">
          <el-input v-model="editForm.memo" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="editLoading" type="primary" @click.native="editSubmit">提交</el-button>
        <el-button @click.native="editFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--新增界面-->
    <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="80px">
        <div>
          <el-upload
            ref="img"
            :show-file-list="false"
            :on-success="handleAddAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
            :action="actionUrl"
            style="text-align:center"
            name="file">
            <img v-if="addForm.avatarUrl===baseUrl || addForm.avatarUrl === baseUrl+'null' || addForm.avatarUrl ===baseUrl+'undefined' || addForm.avatarUrl === null || addForm.avatarUrl.length===0" src="../../../assets/touxiang.jpg" class="avatarImg">
            <img v-else :src="baseUrl+addForm.avatarUrl" class="avatarImg">
          </el-upload>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="账号" prop="account" class="inlineWith">
            <el-input v-model="addForm.account" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="inlineWith">
            <el-input
              :type="pwdAddType"
              v-model="addForm.password"
              name="password"/>
            <span class="show-pwd" @click="showAddPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="姓名" prop="username" class="inlineWith">
            <el-input v-model="addForm.username" auto-complete="off" class="inlineInput" />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email" class="inlineWith">
            <el-input v-model="addForm.email" auto-complete="off"/>
          </el-form-item>
        </div>
        <div style="width:100%; display:inline-flex">
          <el-form-item label="联系电话" prop="tel" class="inlineWith">
            <el-input v-model="addForm.tel" auto-complete="off" class="inlineInput"/>
          </el-form-item>
          <el-form-item label="微信号码" prop="wechat" class="inlineWith">
            <el-input v-model="addForm.wechat" auto-complete="off" />
          </el-form-item>
        </div>
        <el-form-item label="入职时间" prop="entryYear">
          <el-date-picker v-model="addForm.entryYear" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="简介" prop="memo">
          <el-input v-model="addForm.memo" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" type="primary" @click.native="addSubmit">提交</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 权限配置界面 -->
    <el-dialog :visible.sync="permissionFormVisible" :close-on-click-modal="false" accordion title="权限配置" style="z-index:9999;">
      <div class="block">
        <el-form>
          <el-tree ref="treePermission" :data="permissionData" node-key="id" show-checkbox >
            <span slot-scope="{ node }" class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-form>
        <div slot="footer" class="dialog-footer" style="dispaly:block;text-align:center">
          <el-button :loading="permissionLoading" type="primary" size="mini" @click.native="addPermissionSubmit">提交</el-button>
          <el-button size="mini" style="margin-right:50px;margin-top:20px" @click.native="permissionFormVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 角色配置界面 -->
    <el-dialog :visible.sync="rolesFormVisible" :close-on-click-modal="false" title="角色配置" style="z-index:9999;">
      <template>
        <el-checkbox-group
          v-model="roleCheckData">
          <el-checkbox-button v-for="role in rolesData" :label="role.id" :key="role.id">{{ role.label }}</el-checkbox-button>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer" style="dispaly:block;text-align:center">
          <el-button :loading="permissionLoading" type="primary" size="mini" @click.native="addRolesSubmit">提交</el-button>
          <el-button size="mini" style="margin-right:50px;margin-top:20px" @click.native="rolesFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-tooltip placement="top" content="返回顶部">
      <back-to :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
    </el-tooltip>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import util from '@/common/js/util'
import { getListPage, getUserListPage, removeUser, batchRemoveUser, editUser, addUser, addPermission, getRolesListPage, addRoles, getDepartmentCascader, getOption, getPositions } from '@/api/user'
import { isvalidatePass, isvalidatePhoneNumber, isvalidateEmail } from '@/utils/validate'
import { getPermissions } from '@/api/permission'
import BackTo from '@/components/Backto'
import Search from '@/components/Search'
import { getToken } from '@/utils/auth'
export default {
  components: {
    BackTo,
    Search
  },
  data() {
    // 新密码
    const validateNewPass = (rule, value, callback) => {
      if (!isvalidatePass(value)) {
        callback(new Error('密码至少由数字、大写、小写字母其中两种组成，且长度不小于6，同时第一位不能为数字'))
      } else if (value === '') {
        callback(new Error('请输入你的新密码'))
      } else {
        callback()
      }
    }
    // 手机号
    const validatePhoneNumber = (rule, value, callback) => {
      if (!isvalidatePhoneNumber(value)) {
        callback(new Error('手机号码格式不正确'))
      } else if (value === '') {
        callback(new Error('请输入你的手机号'))
      } else {
        callback()
      }
    }
    // 电子邮箱
    const validateEmail = (rule, value, callback) => {
      if (!isvalidateEmail(value)) {
        callback(new Error('邮箱域名只能是以163.com、qq.com、42du.cn结尾'))
      } else if (value === '') {
        callback(new Error('请输入你的电子邮箱'))
      } else {
        callback()
      }
    }
    // const data = [{
    //   label: '111'
    // }]
    return {
      baseUrl: '',
      actionUrl: '',
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px',
        background: '#e7eaf1'
      },
      cascaderprops: {
        value: 'id',
        children: 'children'
      },
      cascaderOptions: [],
      cascaderValue: [],
      logoData: [],
      nextNodeData: [
        {
          'id': '1083608620138364932',
          'children': [],
          'label': 'e部e'
        }
      ],
      filters: {
        username: ''
      },
      imageUrl: '',
      nodeFlag: 0,
      total: 1,
      page: 1,
      pageSize: 7,
      /* userPermissions: [],
      userRoles: [],
      permissionTree: [], // 所有权限配置信息*/
      usersData: [], // 所有用户信息
      // 选中的用户信息
      roleCheckData: [],
      rolesTree: [], // 所有角色配置信息
      permissionData: [],
      rolesData: [],
      rolesFormVisible: false,
      sels: [], // 列表选中列
      pwdAddType: 'password',
      pwdEditType: 'password',
      tags: [],
      editFormVisible: false, // 编辑界面是否显示
      detailFormVisible: false, // 查看详情界面是否显示
      addFormVisible: false, // 新增界面是否显示
      permissionFormVisible: false, // 权限配置界面是否显示
      listLoading: false,
      cascaderDefault: [],
      addLoading: false,
      editLoading: false,
      rolesLoading: false,
      permissionLoading: false,
      editFormRules: {
        username: [{ required: true, message: '请输入你要新增的用户名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号' }],
        avatarUrl: [{ message: '图像' }],
        entryYear: [{ type: 'date', required: true, message: '请选择你的入职时间', trigger: 'change' }],
        tel: [{ trigger: 'blur', validator: validatePhoneNumber }],
        wechat: [{ message: '微信信息' }],
        email: [{ trigger: 'blur', validator: validateEmail }],
        memo: [{ message: '请输入你的简介', trigger: 'blur' }]
      },
      addFormRules: {
        username: [{ required: true, message: '请输入你要新增的用户名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号' }],
        password: [{ required: true, trigger: 'blur', validator: validateNewPass }],
        entryYear: [{ type: 'date', required: true, message: '请选择你的入职时间', trigger: 'change' }],
        tel: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
        wechat: [{ message: '微信信息' }],
        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
        memo: [{ message: '请输入你的简介', trigger: 'blur' }]
      },
      // 编辑界面数据
      editForm: {
        username: '',
        account: '',
        avatarUrl: '',
        role: '',
        password: '',
        department: '',
        position: '',
        tel: '',
        email: '',
        wechat: '',
        memo: '',
        entryYear: ''
      },
      // 新增界面数据
      addForm: {
        username: '',
        account: '',
        avatarUrl: '',
        role: '',
        password: '',
        department: '',
        position: '',
        tel: '',
        email: '',
        wechat: '',
        memo: '',
        entryYear: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'username',
      'account',
      'role',
      'password',
      'avatarUrl',
      'department',
      'position',
      'tel',
      'email',
      'wechat',
      'memo',
      'entryYear',
      'createTime'
    ]),
    headers() {
      return {
        token: getToken()
      }
    }
  },
  watch: {
    editForm() {
      if (typeof this.editForm.entryYear === 'string') {
        this.editForm.entryYear = new Date(this.editForm.entryYear)
      }
    }
  },
  mounted() {
    this.baseUrl = process.env.API_BASEURL
    this.actionUrl = process.env.API_BASEURL + '/user/upload/avatar'
    this.getPermission()
    this.getRoles()
    this.getUsers()
    this.getMyDepartmentCascader()
  },
  methods: {
    // 展示新增密码
    showAddPwd() {
      if (this.pwdAddType === 'password') {
        this.pwdAddType = ''
      } else {
        this.pwdAddType = 'password'
      }
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`)
    },
    getMyDepartmentCascader() {
      return getDepartmentCascader().then(res => {
        this.cascaderOptions = res.data
      })
    },
    // 获得当前页并且显示当前页的用户信息
    handleCurrentChange(val) {
      this.page = val
      if (typeof (this.$refs.mySearch.form.domains) !== 'undefined' && this.$refs.mySearch.form.domains.length !== 0 && this.$refs.mySearch.form.domains[0].field.length !== 0) {
        this.submitForm(this.$refs.mySearch.form.domains)
        console.log('搜索')
        console.log(this.$refs.mySearch.form.domains)
      } else {
        console.log('直接打印')
        console.log(this.$refs.mySearch)
        console.log(this.filters)
        this.getUsers()
      }
    },
    // 上传之后获取imgUrl
    handleAvatarSuccess(res, file) {
      this.editForm.avatarUrl = res
    },
    handleAddAvatarSuccess(res) {
      this.addForm.avatarUrl = res
    },
    // 上传图片之前判断图片的类型和大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 性别显示转换
    /* formatSex: function(row, column) {
      return row.sex === '男' ? '男' : row.sex === '女' ? '女' : '未知'
    },*/
    selsChange: function(sels) {
      this.sels = sels
    },
    // 获取用户列表
    getUsers() {
      const para = {
        page: this.page,
        username: this.filters.username,
        count: this.pageSize + ''
      }
      this.listLoading = true
      getUserListPage(para).then((res) => {
        this.total = parseInt(res.data.total)
        this.usersData = res.data.list
        this.usersData.forEach(userInfo => {
          if (userInfo.department !== null) {
            userInfo.department = userInfo.department.replace(/,/g, '<br>')
          }
          if (userInfo.position !== null) {
            userInfo.position = userInfo.position.replace(/,/g, '<br>')
          }
        })
        this.listLoading = false
      })
    },
    // 显示新增界面
    handleAdd: function() {
      this.addFormVisible = true
      this.addForm = {
        username: '',
        account: '',
        role: '',
        password: '',
        tel: '',
        email: '',
        wechat: '',
        memo: '',
        entryYear: '',
        avatarUrl: ''
      }
    },
    // 显示编辑界面
    handleEdit: function(index, row) {
      // 拷贝
      this.editForm = Object.assign({}, row)
      // 加载职位信息
      const tempOption = []
      getPositions(row.id).then(res => {
        res.data.map(element => {
          tempOption.push(element.id)
        })
      }).then(() => {
        this.cascaderValue = tempOption
        this.$nextTick(() => {
          this.$refs.cascaderP.init()
        })
      })
      this.editFormVisible = true
    },
    // 查看详情
    handleDetail(row) {
      const $table = this.$refs.table
      $table.toggleRowExpansion(row)
      $table.toggleRowSelection(row)
    },
    // 查询用户
    submitForm(msg) {
      this.listLoading = true
      const data = {
        conditions: msg,
        currentPage: this.page + '',
        pageSize: this.pageSize + ''
      }
      getListPage(data).then(res => {
        this.total = res.data.total
        this.usersData = res.data.list
        this.listLoading = false
      })
    },
    // 删除
    handleDel: function(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const para = { id: row.id }
        removeUser(para).then((res) => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getUsers()
        })
      }).catch(() => {

      })
    },
    option() {
      getOption().then(res => {
        this.logoData = res.data
      })
    },
    // 提交权限修改列表
    addPermissionSubmit: function() {
      const ids = this.sels.map(item => item.id)
      this.$confirm('确认要给该用户添加权限吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.permissionLoading = true
        const para = {
          ids: ids,
          userPermissions: this.$refs.treePermission.getCheckedKeys()
        }
        addPermission(para.ids, para.userPermissions).then((res) => {
          this.permissionLoading = false
          this.permissionFormVisible = false
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getUsers()
        })
      }).catch(() => {

      })
    },
    //  权限配置
    handlePermission: function(index, row) {
      this.permissionFormVisible = true
      this.permissionTree = Object.assign({}, row)
      this.$nextTick(() => {
        if (this.sels.length === 1) {
          this.$refs.treePermission.setCheckedKeys([])
          if (this.sels[0].permissionIds !== null) {
            this.$refs.treePermission.setCheckedKeys(this.sels[0].permissionIds.split(','))
          }
        }
      })
    },
    // 获取权限树
    getPermission() {
      const myData = {
        myData: 'linshi'
      }
      myData.arr = 'linshi'
      getPermissions().then((res) => {
        this.permissionData = res.data
      })
    },
    // 角色配置
    handleRoles: function() {
      if (this.sels.length === 1 && this.sels[0].roleId !== null && this.sels[0].roleId.length !== 1) {
        const myData = this.sels[0].roleId.split(',')
        this.roleCheckData = myData
      }
      this.rolesFormVisible = true
    },
    // 提交角色修改列表
    addRolesSubmit: function() {
      const ids = this.sels.map(item => item.id)
      this.$confirm('确认要给该用户添加权限吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.rolesLoading = true
        const para = {
          ids: ids,
          userRoles: this.roleCheckData
        }
        addRoles(para.ids, para.userRoles).then((res) => {
          this.rolesLoading = false
          this.rolesFormVisible = false
          this.roleCheckData = []
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getUsers()
        })
      }).catch(() => {

      })
    },
    // 获取角色配置列表
    getRoles() {
      getRolesListPage().then((res) => {
        this.rolesData = res.data
      })
    },
    // 批量删除
    batchRemove: function() {
      var usernames = this.sels.map(item => item.id)
      // const myData = JSON.stringify({ usernames: usernames })
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        batchRemoveUser(usernames).then((res) => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getUsers()
        })
      }).catch(() => {
      })
    },
    // 保存编辑
    editSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            const para = Object.assign({}, this.editForm)
            para.entryYear = new Date(para.entryYear)
            para.createTime = new Date(para.createTime)
            if (this.cascaderValue.length !== 0) {
              console.log(this.cascaderValue)
              para.positionId = this.cascaderValue
            }
            editUser(para).then((res) => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getUsers()
            })
          })
        }
      })
    },
    // 保存新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            const para = Object.assign({}, this.addForm)
            para.entryYear = (!para.entryYear || para.entryYear === '') ? '' : util.formatDate.format(new Date(para.entryYear), 'yyyy-MM-dd')
            addUser(para).then((res) => {
              this.addLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.getUsers()
            }).catch(() => {
              this.addLoading = false
            })
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray:#889aa4;
  .container{
    width: 94%;
    margin-left: 3%;
    height: 100%;
  }
  .el-dialog{
    width: 800px
  }
  .uploadImage{
    width: 100%
  }
  .avatarImg {
    height: 120px;
    width: 120px;
    border-radius: 60px;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 1px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .svg-icon{
    fill: black
  }
  .el-loading-mask{
    z-index: 1000;
  }
  .table-list{
    width: 100%;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .demo-table {
    .el-form-item {
      margin: 0 auto;
      display: inline-flex
    }
  }
  .form-top, .form-buttom, .form-middle {
    width: 100%;
  }
  .form-top-username, .form-top-account, .form-top-department {
    width: 33.00%
  }
  .form-middle-position, .form-middle-role, .form-middle-email {
    width: 33.00%
  }
  .form-buttom-tel, .form-buttom-wechat, .form-buttom-memo {
    width: 33.00%
  }
  .search {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    margin-bottom: 30px
  }
  .newButton {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    .el-form-item {
      margin-bottom: 0px
    }
  }
  .inlineWith{
    width: 50%
  }
  .inlineInput{
    width: 95%
  }
  .cascade{
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    line-height: 40px;
    outline: 0;
    padding: 0 0 0 10px ;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 95%;
  }
  .myCascader{
    width: 100px;
    float: right;
  }
</style>
<style>
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  p{
    margin: 0;
    padding: 0;
  }
.myCascader input{
    border-color: transparent
  }
  .inlineWith .el-select{
    width: 100%
  }
</style>

